<template>
  <my-layout :tabbar-is-show="false" :is-absolute-body="false">
    <template #Navbar>
      <view
        style="
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          position: relative;
        "
      >
        <image
          @click="goback()"
          :src="indexTabBarUrl.navigateBack"
          style="width: 30rpx; height: 30rpx; margin-left: 40rpx"
        />
        <view
          style="
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
          "
          >卡组</view
        >
      </view>
    </template>
    <template #Body>
      <view
        style="
          padding: 32rpx;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          overflow: hidden;
        "
      >
        <scroll-view
          scroll-y="true"
          enhanced
          :show-scrollbar="false"
          style="width: 100%; height: 100%"
        >
          <view
            style="
              display: grid;
              grid-template-columns: 332rpx 332rpx;
              grid-auto-rows: 420rpx;
              column-gap: 22rpx;
              row-gap: 22rpx;
            "
          >
            <image src="@/static/images/group01.jpg"></image>
            <image src="@/static/images/group02.jpg"></image>
            <image src="@/static/images/group03.jpg"></image>
            <image src="@/static/images/group04.jpg"></image>
            <image src="@/static/images/group04.jpg"></image>
            <image src="@/static/images/group04.jpg"></image>
            <image src="@/static/images/group04.jpg"></image>
            <image src="@/static/images/group04.jpg"></image>
          </view>
        </scroll-view>
      </view>
    </template>
  </my-layout>
</template>

<script>
import util from "@/utils/util.js";
import navBar from "@/components/navbar/navbar.vue";
import indexTabBarUrl from "@/url/index_tabBar";
export default {
  components: {
    "nav-bar": navBar,
  },
  data() {
    return {
      indexTabBarUrl,
      isIphoneX: false,
      navbarData: {
        // 头部组件所需参数
        showCapsule: 2, //是否显示左上角返回图标   1表示白色显示    0表示不显示 2黑色
        positionShow: 1, //0不显示定位 1 显示定位
        backgroundCor: 2, //0 无背影色 1首页背景颜色   2白色
        statusBarHeight: uni.getSystemInfoSync()["statusBarHeight"],
        navHeight: 45,
        titles: "卡组",
      },
    };
  },
  onLoad() {
    // 获取手机系统信息
    const info = uni.getSystemInfoSync();
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.navbarData.navHeight =
      menuButtonInfo.bottom -
      info.statusBarHeight +
      (menuButtonInfo.top - info.statusBarHeight);
  },
  methods: {
    goback() {
      uni.navigateBack();
    },
  },
  created() {
    this.isIphoneX = util.getSystemInfoForPhone(); // 判断手机机型是否为iPhone X以上
  },
};
</script>

<style>
image {
  width: 100%;
  height: 100%;
}
</style>
